﻿@namespace BlazorDemo.Pages.CaseViews
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="SpinEdit#DisplayFormat" />Display Format</h2>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1.DisplayFormat">DisplayFormat</a> property to format the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxSpinEdit-1">Spin Edit</a>’s display value when the editor is not focused.
    </p>
    <p>
        Spin Edit supports standard formats. See the <a class="helplink" target="_blank" href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/standard-numeric-format-strings">Standard Numeric Format Strings</a> and <a class="helplink" target="_blank" href="https://docs.microsoft.com/en-us/dotnet/standard/base-types/custom-numeric-format-strings">Custom Numeric Format Strings</a> help topics for more information.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Enter a price" />
    </div>
    <div class="card-body mw-480">
        <DxSpinEdit @bind-Value="@DecimalValue" DisplayFormat="C" SizeMode="SizeMode"></DxSpinEdit>
    </div>
</div>

<CodeSnippet_Editor_SpinEdit_DisplayFormat />

@code {
    Decimal DecimalValue { get; set; } = 320.5m;
}
